<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>表单验证</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	</head>

	<style>
		#container-content {
			text-align: center;
		}
		
		.a {
			width: 800px;
			margin: 0 auto;
			padding: 0px !important;
		}
	</style>

	<script type="text/javascript">
		//添加JS代码验证
		$(function() {
			$("#username").focus(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>用户名不能为空</font>");
				}
			}).keydown(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>用户名不能为空</font>");
				} else if(!(this.value.match("^[a-zA_Z]+$"))) {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>用户名只能由英文组成</font>");
				} else {
					$(this).parent().parent().find(".col-sm-6").html("");
				}
			}).keyup(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>用户名不能为空</font>");
				} else {
					$(this).triggerHandler("keydown");
				}
			}).blur(function() {
				$(this).triggerHandler("keyup");
			});

			$("#password1").focus(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>密码不能为空</font>");
				}
			}).keydown(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>密码不能为空</font>");
				} else if(this.value.length < 6) {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>密码至少为6位</font>");
				} else {
					$(this).parent().parent().find(".col-sm-6").html("");
				}
			}).keyup(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>密码不能为空</font>");
				} else {
					$(this).triggerHandler("keydown");
				}
			}).blur(function() {
				$(this).triggerHandler("keyup");
				if($("#password2").val() == "") {} else if($("#password2").val() != $("#password1").val()) {
					$("#password2").parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>两次密码不一致</font>");
				} else {
					$("#password2").parent().parent().find(".col-sm-6").html("");
				}
			});

			$("#password2").focus(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>密码不能为空</font>");
				}
			}).keydown(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>密码不能为空</font>");
				} else if(this.value != $("#password1").val()) {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>两次密码不一致</font>");
				} else {
					$(this).parent().parent().find(".col-sm-6").html("");
				}
			}).keyup(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>密码不能为空</font>");
				} else {
					$(this).triggerHandler("keydown");
				}
			}).blur(function() {
				$(this).triggerHandler("keyup");
			});

			$("#inputEmail").focus(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>邮箱不能为空</font>");
				}
			}).keydown(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>邮箱不能为空</font>");
				} else if(!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.value))) {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>邮箱格式不正确</font>");
				} else {
					$(this).parent().parent().find(".col-sm-6").html("");
				}
			}).keyup(function() {
				if(this.value == "") {
					$(this).parent().parent().find(".col-sm-6").html("<font class='control-label' color='firebrick ' style='float: left;'>邮箱不能为空</font>");
				} else {
					$(this).triggerHandler("keydown");
				}
			}).blur(function() {
				$(this).triggerHandler("keyup");
			});

			$("#form1").submit(function() {
				$(this).find("input").trigger("blur");
				//				$(this).find("font").each(function(i,e){
				//					alert($(e).text().length)
				//					if ($(e).text().length > 0) {
				//						alert(111)
				//						return submit.false;
				//					}
				//				});

				//				$("#form1 .col-sm-6").each(function(){
				//					alert($(this).text())
				//				});

				//				alert($("#form1 .col-sm-6").text())
				//				alert($(this).find(".col-sm-6").text())
				//				alert($("#form1 font").text().length);

				if($("#form1 font").text().length > 0) {
					return false;
				} else {
					$("#button1").click();
					return false;
				}

				//				alert($("#form1 font").parent().text().length);
				//				if ($("#form1 font").parent().text().length > 0) {
				//					return false;
				//				}
			});

		});
	</script>

	<body>

		<div class="container-breadcrumb">
			<div class="row  a ">
				<div class="col-sm-12 a">
					<ol class="breadcrumb">
						<li class="active">表单练习</li>
					</ol>
				</div>
			</div>

			<div id="container-content" class="container-content">
				<div class="panel panel-default a">
					<div class="panel-heading">添加用户信息</div>
					<div class="panel-body">
						<form class="form-horizontal" id="form1" target="_blank" action="#">
							<div class="form-group">
								<label for="username" class="col-sm-2 control-label">用户名</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="username" placeholder="Username">
								</div>
								<div class="col-sm-6"></div>
							</div>
							<div class="form-group">
								<label for="password1" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-4">
									<input type="password" class="form-control" id="password1" placeholder="Password">
								</div>
								<div class="col-sm-6"></div>
							</div>
							<div class="form-group">
								<label for="password2" class="col-sm-2 control-label">确认密码</label>
								<div class="col-sm-4">
									<input type="password" class="form-control" id="password2" placeholder="Password">
								</div>
								<div class="col-sm-6"></div>
							</div>
							<div class="form-group">
								<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
								<div class="col-sm-4">
									<input type="email" class="form-control" id="inputEmail" placeholder="Email">
								</div>
								<div class="col-sm-6"></div>
							</div>

							<div class="form-group">
								<div class="col-sm-12">
									<center><button type="submit" class="btn btn-primary">提交</button></center>
								</div>
							</div>

							<!-- Small modal -->
							<!--<button type="button" id="button1" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm" style="display: none;">提交</button>

							<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
								<div class="modal-dialog modal-sm" role="document">
									<div class="modal-content">
										表单验证成功！
									</div>
								</div>
							</div>-->

							<!-- Button trigger modal -->
							<button type="button" id="button1" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="display: none;">
							  Launch demo modal
							</button>

							<!-- Modal -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
											<h4 class="modal-title" id="myModalLabel">登录</h4>
										</div>
										<div class="modal-body">
										验证通过！
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
											<!--<button type="button" class="btn btn-primary">确认</button>-->
										</div>
									</div>
								</div>
							</div>

						</form>
					</div>
				</div>
			</div>

			<!--/.row-->
		</div>

	</body>

</html>